<template>
	<view class="container">
		<image src="../../../static/fanli/6.png" mode="" class="logo"></image>
		
		<view class="panel">
			<view class="accout">
				<image src="../../../static/fanli/8.png" mode="" class="icon"></image>
				
				<view class="info" @click="onAccoutClick">
					<view class="em">
						<text>{{accout || '请绑定支付宝'}}</text>
					</view>
					
					<view class="i">
						<text>{{truename || '去绑定'}}</text>
					</view>
				</view>
				
				<image src="../../../static/fanli/9.png" mode="" class="go"></image>
			</view>
			
			<view class="form">
				<view class="lb">
					<text>提现金额</text>
				</view>
				
				<view class="input_bar">
					<view class="i">
						<text>￥</text>
					</view>
					<input class="input" type="number" v-model="cash" />
				</view>
				
				<view class="tips">
					<view class="p">
						<text>可提余额 {{balance}}元</text>
					</view>
					
					<button type="primary" class="btn" @click="onAllinClick">全部提现</button>
				</view>
				
				<button type="primary" class="btn_submit" :class="accout&&truename&&cash&&cash > min ? 'ok' : ''" @click="onSubmitClick">提交申请</button>
			</view>
		</view>
			
		<view class="dfn">
			<image src="../../../static/fanli/7.png" mode="" class="icon"></image>
			
			<view class="p">
				<text>每月25号后可提现上月已确认收货的订单佣金{{'\n'}}最低提现金额 {{min}} 元</text>
			</view>
		</view>
		
		<view class="footer">
			<navigator url="/pageMe/me/withdrawal-list/withdrawal-list" class="go">提现记录></navigator>
		</view>
	</view>
</template>

<script>
	import { 
		runWithdrawal,
		runUserAlipayInfo
	} from '@/module/api'
	import { formatDateTime } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	
	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		data() {
			return {
				cash: '',
				accout: null,
				truename: null
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			},
			
			balance (){
				return this.$store.state.userInfo.balance
			},
			
			min () {
				return this.$store.state.userInfo.least_money
			}
		},
		
		onLoad(params) {
			let _t = this
			
			runUserAlipayInfo({
				params:{
					uid: this.userInfo.id,
				},
				success: res => {
					_t.accout = res.data.alipay
					_t.truename = res.data.real_name
				}
			})
			
			WxNotificationCenter.addNotification("event_refresh_user_alipay", params => {
				_t.accout = params.accout
				_t.truename = params.truename
			}, this)
		},
		
		onUnload() {
			WxNotificationCenter.removeNotification("event_refresh_user_alipay", this)
		},
		
		methods:{
			onAllinClick () {
				this.cash = this.balance
			},
			
			onAccoutClick () {
				uni.navigateTo({
					url: "/pageMe/me/alipay-update/alipay-update"
				})
			},
			
			onSubmitClick () {
				let _t = this
				
				if(this.cash == '') return false
				if(this.accout == null) return false
				if(parseFloat(this.cash) < this.min) return false
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				runWithdrawal({
					params:{
						uid: this.userInfo.id,
						type: 2,
						cash: this.cash
					},
					success: res => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "申请成功"
						})
						//
					},
					fail: res => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					},
					error: () => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "系统繁忙，请稍候再试"
						})
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F2F2F2;
	}
</style>

<style lang="less" scoped>
	.logo{
		margin: 66px auto;
		width: 426px;
		height: 120px;
		display: block;
	}
	
	.panel{
		width: 690px;
		margin: 0 auto;
		background: #FFFFFF;
		
		.accout{
			background: #fcfcfc;
			height: 140px;
			padding: 0 30px;
			display: flex;
			align-items: center;
			width: 100%;
			box-sizing: border-box;
			position: relative;
			
			.icon{
				width: 80px;
				height: 80px;
				margin-right: 30px;
			}
			
			.info{
				
				.em{
					font-size: 28px;
					color: #333333;
				}
				
				.i{
					font-size: 24px;
					color: #666666;
				}
			}
			
			.go{
				position: absolute;
				top: 55px;
				right: 30px;
				width: 30px;
				height: 30px;
			}
		}
		
		.form{
			padding: 30px;
			
			.lb{
				padding-top: 10px;
				font-size: 24px;
				color: #666666;
			}
			
			.input_bar{
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #e6e6e6;
				padding: 10px 0;
				
				.i{
					width: 40px;
					font-size: 40px;
					padding-top: 20px;
					color: #111111;
				}
				
				.input{
					width: 590px;
					height: 120px;
					font-size: 72px;
					color: #111111;
				}
			}
			
			.tips{
				height: 80px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.p{
					font-size: 28px;
					color: #666666;
				}
				
				.btn{
					font-size: 28px;
					color: #eb0000;
					background: #FFFFFF;
				}
			}
			
			.btn_submit{
				height: 92px;
				line-height: 92px;
				border-radius: 50px;
				background: #FFA2A9;
				font-size: 32px;
				color: #FFFFFF;
				margin-top: 40px;
				margin-bottom: 20px;
				
				&.ok{
					background:linear-gradient(180deg,rgba(255,87,87,1) 0%,rgba(255,40,61,1) 100%);
				}
			}
		}
	}
	
	.dfn{
		width: 690px;
		margin: 30px auto 0;
		display: flex;
		justify-content: space-between;
		
		.icon{
			width: 28px;
			height: 28px;
		}
		
		.p{
			width: 650px;
			font-size: 24px;
			color: #999999;
		}
	}
	
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		
		.go{
			font-size: 28px;
			color: #E7261F;
			line-height: 80px;
			text-align: center;
		}
	}
</style>
